<template>
<view>
<!--轮播图-->
    <block v-if="datas.goods_images_list.length >0">
        <view>
            <swiper class="swiper_box" indicator-dots="true" vertical autoplay="true" interval="3000" duration="1000">
                <block v-for="(item, index) in datas.goods_images_list" :key="index">
                    <swiper-item>
                        <image @tap="adTopage" :src="item.image_url ? url + item.image_url : '../../../images/unknow'" :data-id="item.goods_id" class="slide-image"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </block>


<view class="justify-content flex top-title">
    <view>{{datas['combination'][0]['title']}}</view>
    <view>最多可省￥ {{datas['combination'][0]['count_price']}} </view>
</view>
<view class="goods-title-bgcolor">
    
    <view class="goods-title-border">
        <text class="goods-title">搭配商品</text>
    </view>
</view>
<view class="container" v-if="requestData.length > 0">
    <view class="login-in pd-bg-fff">
        <view v-for="(item, idx) in requestData" :key="idx" class="order-item" :data-item="idx">
            <view class="goods-ico" @tap="checkItem" data-check="item.selected" :data-item="idx">
                <icon type="success" size="16" :color="item.selected?'#ff6a00':'gray'"></icon>
            </view>
            <navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
            </navigator>
            <view class="goods-cont">
                <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">{{item.goods_name}}</navigator>
                <view class="goods-attribute ellipsis-2">{{item.spec_key_name}}</view>
                <view class="goods-price co-red">￥{{item.price}}</view>
                <view class="justify-content flex">
                    <view class="goods-price co-red collocation-li-title-price">省￥{{item.original_price - item.price}}</view>
                        <view class="count" v-if="idx==0">
                            <view class="sub" @tap.stop="subNum" :data-num="item.goods_num?item.goods_num:1">-</view>
                            <input type="number" :value="item.goods_num?item.goods_num:1" :data-num="item.goods_num?item.goods_num:1" @blur="valueToNum"></input>
                            <view class="add" @tap.stop="addNum" :data-num="item.goods_num?item.goods_num:1">+</view>
                        </view>
                        <view v-else>
                            <view>X{{item.goods_num?item.goods_num:1}}</view>
                        </view>
                </view>
            </view>
        </view>
    </view>
 
</view>

   <view class="justify-content flex width-100 bottom">
    <view></view>
    <view class="bottom-padding">
        <view>套餐价：<text>￥{{setmeal_price}}</text></view>
        <view>共省：<text>￥{{cost_saving}}</text> </view>
     </view>
</view>


<!-- 加入购物车栏  -->
<view class="join-cart">
    <view class="custom-service cart-ico">
        <button v-if="imChoose==1" open-type="contact" class="cs-button" :session-from="'wechat|' + userInfo.user_id + '|' + userInfo.nickname + '|' + userInfo.head_pic">
            <image class="cs-img cs-img-kf" src="/static/images/custom-service.png"></image> 
            <view class="cs-ing-name">客服</view>
        </button>
        <view v-else-if="imChoose==0" class="cs-button" @tap="contactService">
            <image class="cs-img cs-img-kf" src="/static/images/custom-service.png"></image> 
            <view class="cs-ing-name">客服</view>
        </view>
        <view v-else class="cs-button">
            <image class="cs-img cs-img-kf" src="/static/images/custom-service.png"></image> 
            <view class="cs-ing-name">客服</view>
        </view>
    </view>

    <view class="shopping-cart cart-ico">
        <navigator @tap.stop="tocart">
            <image class="sc-img" src="/static/images/shopping-cart.png"></image>
            <view class="cart-num ellipsis-1"> {{cartGoodsNum}} </view>
            <view>购物车</view>        
        </navigator>
    </view>
   
        <view class="join-btn cart-btn" @tap="addCart" data-action="add">加入购物车</view>
        <view class="buy-btn cart-btn" @tap="addCart" data-action="buy">立即购买</view>

   
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      currentPage: 1,
      cartGoodsNum: 0,
      datas: null,
      district_id: 0,
      imChoose: 0 //0 QQ客服,1 IM客服,2 小能客服
      ,
      defaultMenu: "",
      menu_index: "",
      menu_model: "",
      setmeal_price: "",
      cost_saving: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    that.getCardList(options);
    that.requestCardNum();
    that.setData({
      defaultMenu: app.globalData.defaultMenu,
      menu_index: app.globalData.menu_index,
      menu_model: app.globalData.menu_model
    });
    app.globalData.getConfig(function (res) {
      var im_choose = common.getConfigByName(res.config, 'im_choose');
      that.setData({
        imChoose: im_choose
      });
    });
  },
  methods: {
    adTopage: function (e) {
      var id = e.currentTarget.dataset.id;

      if (id > 0) {
        uni.navigateTo({
          url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + id
        });
      }
    },
    tocart: function () {
      var url = '/pages/cart/cart/cart';
      app.globalData.getConfig(function (res) {
        var is_block = common.getConfigByName(res.config, 'is_block_index');

        if (is_block == 0) {
          app.globalData.menu_index = '2';
          common.defaultTotabar('2', -1);
        } else {
          common.customTocart();
        }
      });
    },
    valueToNum: function (e) {
      var goodsNum;

      if (isNaN(e.detail.value) || e.detail.value < 1) {
        goodsNum = 1;
      } else if (e.detail.value > 200) {
        goodsNum = 200;
      } else {
        goodsNum = parseInt(e.detail.value);
      }

      this.changeNum(goodsNum);
    },
    addNum: function (e) {
      var num = e.currentTarget.dataset.num;

      if (num == 200) {
        return;
      }

      num++;
      this.changeNum(num);
    },
    subNum: function (e) {
      var num = e.currentTarget.dataset.num;

      if (num == 1) {
        return;
      }

      num--;
      this.changeNum(num);
    },

    /** 修改购物车数量 */
    changeNum: function (num) {
      this.AsyncUpdateCart(num);
    },

    /** 查询购物车选中商品价格 */
    AsyncUpdateCart: function (num) {
      var that = this;
      var datas = that.requestData;
      var setmeal_price = 0.00; //套餐价

      var cost_saving = 0.00; //节省

      for (var i = 0; i < datas.length; i++) {
        if (i == 0) {
          datas[0]['selected'] = 1;
        }

        datas[i]['goods_num'] = num ? num : datas[0]['goods_num'];

        if (datas[i]['selected'] == 1) {
          setmeal_price += parseFloat(datas[i]['price']) * (num ? num : datas[i]['goods_num'] ? datas[i]['goods_num'] : 1);
          cost_saving += (parseFloat(datas[i]['original_price']) - parseFloat(datas[i]['price'])) * (num ? num : datas[i]['goods_num'] ? datas[i]['goods_num'] : 1);
        }
      }

      setmeal_price = setmeal_price.toFixed(2);
      cost_saving = cost_saving.toFixed(2);
      that.setData({
        setmeal_price: setmeal_price,
        cost_saving: cost_saving,
        requestData: datas
      });
    },

    /** 加入购物车 */
    addCart: function (e) {
      var that = this;
      var datas = that.requestData;
      var Selected = 0;
      var arr = new Array();

      for (var i = 0; i < datas.length; i++) {
        if (datas[i]['selected'] == 1) {
          var obj = new Object();
          obj.goods_id = datas[i]['goods_id'];
          obj.item_id = datas[i]['item_id'];
          obj.region_id = that.district_id;
          arr.push(obj);
          Selected++;
        }
      }

      if (Selected == 1) {
        return app.globalData.showTextWarining("请勾选至少俩个商品!");
      }

      request.post('/api/cart/addCombination', {
        data: {
          combination_id: that.datas.combination[0].combination_id,
          num: datas[0]['goods_num'] ? datas[0]['goods_num'] : 1,
          combination_goods: JSON.stringify(arr)
        },
        success: function (res) {
          if (e.currentTarget.dataset.action == 'add') {
            //加入购物车 
            app.globalData.showSuccess('添加成功', that.requestCardNum());
          } else {
            //立即购买
            uni.navigateTo({
              url: '/pages/cart/cart/cart'
            });
          }
        }
      });
    },
    checkItem: function (e) {
      var datas = this.requestData;

      if (e.currentTarget.dataset.item == 0) {
        return;
      }

      datas[e.currentTarget.dataset.item].selected = Number(!datas[e.currentTarget.dataset.item].selected);
      this.setData({
        requestData: datas
      });
      this.AsyncUpdateCart();
    },

    /** 请求购物车数量 */
    requestCardNum: function () {
      var that = this;
      request.get('/api/cart/index', {
        success: function (res) {
          var cartGoodsNum = 0;

          if (res.data.result.length == 0) {
            that.setData({
              cartGoodsNum: cartGoodsNum
            });
            return;
          }

          var list = res.data.result.cart_list;

          for (var i = 0; i < list.length; i++) {
            cartGoodsNum += list[i].goods_num;
          }

          that.setData({
            cartGoodsNum: cartGoodsNum
          });
        }
      });
    },
    getCardList: function (options) {
      var that = this;
      request.get(that.url + '/api/Goods/collocation_details', {
        data: {
          id: options.goods_id,
          item: options.item_id,
          combination: options.combination_id
        },
        success: function (res) {
          that.setData({
            requestData: res.data.result.combination[0]['combination_goods'],
            datas: res.data.result,
            district_id: options.district_id
          });
          that.AsyncUpdateCart(1);
        }
      });
    }
  }
};
</script>
<style>
page{
    background-color:#F6F6F6;
}
.justify-content{
    justify-content: space-between;
}
.goods-title-bgcolor{
    background-color: white
}
.flex{
    display: flex;
}
.top-title{
    padding:10px;
    color:white;
    background-color:#ff6a00;
    margin-bottom:10px;
}
.bottom-padding{
    padding: 20rpx;
    font-size: .7rem;
}
.bottom-padding view text{
    color:#ff6a00;
}
.goods-title-border{
    margin-left:40rpx;
    border-left:3px solid;
    border-color:#ff6a00;
    line-height:30rpx;
}
.goods-title{
    font-size:.8rem;
    margin-left:20rpx;
}
.container {
    display: flex;
    height: 100%;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
    background-color: #fff;
    padding-bottom:0rpx;
}
.bottom{
    padding-bottom:100rpx;
    margin-top:16rpx;
    background-color:#fff;
}
.width-100{
    width: 100%
}
.login-in{
    width: 100%;
    box-sizing: border-box;
}
.order-item{
    display: flex;
    justify-content: space-around;
    height: 200rpx;
    padding: 10rpx 0;
    border-bottom:1px solid #f3f3f3;
}
.goods-ico{
    display: flex;
    align-items: center;
}
.goods-img{
    width: 180rpx;
    height: 180rpx;
    font-size: 0;
    margin-top: 10rpx;
}
.goods-cont{
    position: relative;
    width: 430rpx;
    height: 200rpx;
    font-size: 28rpx;
}
.goods-name{
    width: 370rpx;
    max-height: 64rpx;
    margin: 8rpx 0;
    line-height: 32rpx;
    color: #333;
}
.goods-attribute{
    max-height: 52rpx;
    line-height: 26rpx;
    font-size: 24rpx;
    color:#999;
}
.goods-price{
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 10rpx;
}
.btn-del{
    position: absolute;
    right: 0;
    top:8rpx;
    width: 34rpx;
    height: 34rpx;
}
.count{
    position: absolute;
    right: 0;
    width: 156rpx;
    height: 50rpx;
    border: 1px solid #f3f3f3;
}
.count>view,.count>input{
    float: left;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}
.sub{
    border-right: 1px solid #f3f3f3
}
.add{
    border-left: 1px solid #f3f3f3
}
.pay-for{
    width: 100%;
    height: 100rpx;
    position: fixed;
    left: 0;
    bottom: 107rpx;
    font-size: 28rpx;
    color: #666;
    background-color:#f0f2f5;
    z-index:9999;
}
.pay-for .pay-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    border-radius:0;
}
.pay-for .pay-disable{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #bbbbbb;
    color: #fff;
    border-radius:0;
}
.pay-for .consumer{
    float: right;
    margin-right: 20rpx;
    line-height: 50rpx;  
}
.pay-for .checkbox{
    float: left;
    padding-left: 40rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
}
.pay-for .ico-check{
   display: flex;
   align-items: center;
   margin-right: 20rpx;
}


/** 热卖推荐 **/

.choice_box {
    font-size: 12px;
}
.choice_box .choice_list .choice_item{
    width: 368rpx;
    float: left;
    margin: 2rpx;
    background-color: #fff;
}
.choice_box .choice_list image {
    width: 100%;
    height: 368rpx;
}
.choice_box .choice_list .title {
    height: 72rpx;
    line-height: 36rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
}
.choice_box .choice_list .choice_footer {
    display: block; 
    margin: 20rpx 5rpx 15rpx;
    position: relative;
    height: 30rpx;
    line-height: 17rpx;
}
.choice_box .choice_list .choice_footer .price {
  color: #ff6a00;
  font-size:.855rem;
}
.choice_box .choice_list .choice_footer .similer {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #686868;
    width: fit-content;
    line-height: 30rpx;
    padding: 1rpx 6rpx;
    border-radius: 5rpx;
     font-size:.655rem;
}

.section{
    background-color: #fff;
}
.section-title{
    padding-top:30rpx;
    height:54rpx;
    line-height:54rpx;
    font-size:28rpx;
    font-weight: 700;
    color: #333;
    text-align: center;
    letter-spacing: 3rpx;
}
.section-subtitle{
    line-height:0;
    width:340rpx;
    height:16rpx;
    padding-bottom: 20rpx;
    margin:0 auto;
}
.collocation-li-title-price{
    margin:10rpx 0;
    background-color:#ff6a00;
    color:white;
    padding:2rpx 8rpx;
    font-size:24rpx;
    border-radius:10rpx;
}


/** 底部s */


.join-cart{
    border-top:1px solid;
    color:#F6F6F6;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    text-align: center;
}
.join-cart>view{
    width: 25%;
}

.cart-ico{
    font-size: 24rpx;
    color: #333;
}

.cs-button{
    font-size: 26rpx;
    border: 1rpx solid #fff;
    height:112rpx;
    line-height: 45rpx; 
}
.cs-button::after{ border: none; } 

.cs-img-kf{
    margin-top: 7rpx
}

.cs-img{
    width: 45rpx;
    height: 40rpx;
    margin-top: 15rpx;
}
.shopping-cart{
    position: relative;
}
.sc-img{
    width: 42rpx;
    height: 40rpx;
    margin-top: 15rpx;
}

.cart-num{
    position: absolute;
    left: 50%;
    top: 0;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(217,81,99,0.9);
}
.cart-btn{
    font-size: 28rpx;
    color: #fff;
    line-height: 100rpx;
}
.join-btn{
    background-color: #ffb03f;
}
.buy-btn{
    background-color: #ff6a00;
}
.cs-ing-name{
    margin-top: -12rpx;
}

/** 底部e */

.swiper_box {
    width: 100%;
    height: 380rpx;
}
swiper-item image {
    width: 100%;
    height: 380rpx;
    display: inline-block;
    overflow: hidden;
}
</style>